<template>
	<view>
		<view class="bg-white">
			<cu-custom :bgColor="globalData.bgColor" :isBack="false">
				<block slot="content"><text class="text-darkgrey">我的</text></block>
			</cu-custom>
			<view class="padding-top-xl">
				<view class="margin-top-xs">
					<view class="cu-avatar round flex head-bg"
						:style="'background-image:url('+this.userInfo.avatar+')'"></view>
					<view class="padding-top-xs">
						<view class="text-xxl text-darkgrey margin-top-sm text-center">{{globalData.username}}</view>
						<view class="text-purple-grey text-sm margin-top-xs text-center">ID:{{globalData.user_id}}
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="flex margin-top-xl padding-left-xs padding-right-xs">
				<view class="flex-sub bg-gradual-darkblue padding-sm margin-sm traffic">
					<view class="cu-card">
						<view class="text-white text-df" style="opacity: 0.7;">流量总数</view>
						<view class="text-white margin-top text-center quantity">8999899</view>
					</view>
				</view>
				<view class="flex-sub bg-gradual-gray padding-sm margin-sm turnover">
					<view class="cu-card ">
						<view class="text-white text-df" style="opacity: 0.7;">营业总额</view>
						<view class="text-white margin-top text-center quantity">{{999999 | moneyFormat}}</view>
					</view>
				</view>
			</view> -->
			<view class="margin-top-xl padding-top margin-sm cu-list menu text-darkgrey">
				<navigator class="cu-item" url="account/index">
					<view class="content">
						<image src="../../static/public/icon/icon-1.png"></image>
						<text class="margin-left-sm">账号与安全</text>
					</view>
				</navigator>
				<!-- <view class="cu-item">
					<view class="content">
						<image src="../../static/public/icon/icon-2.png"></image>
						<text class="margin-left-sm">我的卡片</text>
					</view>
				</view> -->
				<navigator class="cu-item" url="setting/index">
					<view class="content">
						<image src="../../static/public/icon/icon-3.png"></image>
						<text class="margin-left-sm">系统配置</text>
					</view>
				</navigator>
				<navigator class="cu-item" url="terms-of-service/terms-of-service">
					<view class="content">
						<image src="../../static/public/icon/icon-4.png"></image>
						<text class="margin-left-sm">服务条款</text>
					</view>
				</navigator>
				<!-- <view class="cu-item">
					<view class="content">
						<image src="../../static/public/icon/icon-5.png"></image>
						<text class="margin-left-sm">联系客服</text>
					</view>
				</view> -->
				<navigator class="cu-item" url="about">
					<view class="content">
						<image src="../../static/public/icon/icon-6.png"></image>
						<text class="margin-left-sm">关于</text>
					</view>
				</navigator>
			</view>
		</view>
		<view class="cu-item bg-white margin-top-sm exit-bg" @tap="onLogout">
			<view class="content text-darkgrey text-red text-center">退出登录</view>
		</view>
	</view>
</template>

<script>
	import service from '@/store/service';
	import JimUtil from '@/utils/jim-util'
	import api from '@/api/api';
	const app = getApp();

	export default {
		data() {
			return {
				globalData: app.globalData,
				showLogoutModal: false, // 登出弹框
				userInfo: {}
			}
		},
		created() {},
		onShow() {
			this.userInfo = service.getUser();
			// 更新消息消息未读数
			JimUtil.getJIMUnreadMsgCnt()
		},
		methods: {
			onLogout() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: function(res) {
						if (res.confirm) {
							api.logout().then(response => {
								// 移出用户信息
								service.removeUser();
								//登出IM
								JimUtil.IMloginOut()
								//登出
								uni.reLaunch({
									url: '/pages/login/login'
								});
								// 重启应用
								// #ifdef APP-PLUS
								plus.runtime.restart();
								// #endif

							}).catch(response => {
								// 移出用户信息
								service.removeUser();
								//登出
								uni.reLaunch({
									url: '/pages/login/login'
								});
								// 重启应用
								// #ifdef APP-PLUS
								plus.runtime.restart();
								// #endif

							});
						} else if (res.cancel) {}
					}
				});


			}
		}
	}
</script>

<style>
	.head-bg {
		width: 160rpx;
		height: 160rpx;
		margin: auto;
		border: #FFFFFF 5rpx solid;
		box-shadow: 0px 3px 10px #c2c2c2;
	}

	.traffic {
		height: 200rpx;
		border-radius: 20rpx;
		box-shadow: 0px 5px 10px #b9d3ee;
	}

	.quantity {
		font-size: 54rpx;
	}

	.turnover {
		height: 200rpx;
		border-radius: 20rpx;
		box-shadow: 0px 5px 10px #c2c2c2;
	}

	.exit-bg {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
	}
</style>
